<template>
    <el-dialog :title="title" :visible="visible" append-to-body :destroy-on-close="true" @close="close">
        <el-form size="small" :model="ruleForm" label-width="100px" ref="ruleForm" v-loading="loading">
            <el-form-item label="联系人" prop="name">
                <el-input v-model="ruleForm.name" oninput="value = value.replace(/\s/g, '')" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model="ruleForm.phone" oninput="value = value.replace(/\s/g, '')" placeholder="请输入电话"></el-input>
            </el-form-item>
            <el-form-item label="所在地区" prop="select_address_id">
                <el-cascader placeholder="请选择省/市/区" :options="regionData" v-model="ruleForm.region_id" @change="handleChange"></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="detail">
                <el-input type="textarea" v-model="ruleForm.detail" oninput="value = value.replace(/\s/g, '')" placeholder="小区/写字楼/学校"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close" size="small">取 消</el-button>
            <el-button type="primary" size="small" @click="onSubmit('ruleForm')" :disabled="isDisabled" :loading="isLoading">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { getRegionTree,saveAddress } from '../../../api/setting';
export default {
    name: "addDriver",
    props: {},
    data() {
        return {
            visible: false,
            loading: false,
            ruleForm: {
                address_id: '',
                name: '',
                phone: '',
                detail: '',
                province_id: '',
                city_id: '',
                region_id: '',
                // select_address_id:'',
            },
            regionData: [],
            title: '添加地址',
            isDisabled: false,
            isLoading: false,
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入联系人",
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入电话",
                        trigger: "blur",
                    },
                    {
                        pattern: /^1[3456789]\d{9}$/,
                        message: "请输入正确的手机号",
                        trigger: "blur",
                    },
                ],
                region_id: [
                    {
                        required: true,
                        message: "请输入省市区",
                        trigger: "change",
                    },
                ],
                detail: [
                    {
                        required: true,
                        message: "请输入详细地址",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.getRegionList()
    },
    methods: {
        add() {
            this.visible = true;
        },
        getRegionList() {
            getRegionTree().then(res => {
                this.loading = false;
                if (res.code == 0) {
                    for (let key in res.data) {
                        let provinceObj = {
                            value: res.data[key].id,
                            label: res.data[key].name
                        }
                        provinceObj.children = [];
                        //组装城市数据
                        for (let c in res.data[key].city) {
                            let cityObj = {
                                value: res.data[key].city[c].id,
                                label: res.data[key].city[c].name
                            }
                            provinceObj.children.push(cityObj)
                            cityObj.children = [];
                            for (let r in res.data[key].city[c].region) {
                                let regionObj = {
                                    value: res.data[key].city[c].region[r].id,
                                    label: res.data[key].city[c].region[r].name
                                }
                                cityObj.children.push(regionObj)
                            }
                        }
                        this.regionData.push(provinceObj);
                    }
                }
            })
        },
        handleChange(e) {
            this.ruleForm.province_id = e[0];
            this.ruleForm.city_id = e[1];
            this.ruleForm.region_id = e[2];
        },
        onSubmit(formName) {
            this.isDisabled = true;
            this.isLoading = true;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    saveAddress(this.ruleForm).then((res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: "success",
                            });
                            this.close();
                            this.$emit("reload");
                            this.isDisabled = false;
                            this.isLoading = false;
                        } else {
                            this.isDisabled = false;
                            this.isLoading = false;
                        }
                    });
                } else {
                    this.isDisabled = false;
                    this.isLoading = false;
                    return false;
                }
            });
        },
        clear() {
            this.ruleForm = {
                address_id: '',
                name: '',
                phone: '',
                detail: '',
                province_id: '',
                city_id: '',
                region_id: ''
            };
        },
        close() {
            this.visible = false;
            this.clear()
        },
    },
};
</script>

<style>
</style>